<template>
	<view>
		<!-- <van-button type="primary">按钮</van-button> -->
		<view class="nav_title">
			<view class="nav_left" @tap="getScript()">
				<image style="width: 22rpx;height: 28rpx;margin-right: 10rpx;"
					src="https://daiyue.gzzhenyi.net/static/image/store/location4x.png" mode=""></image>
				<text>{{ user.location }}</text>
			</view>

			<van-search shape="round" use-left-icon-slot="true" style="width: 620rpx;" @search="getSearchList" @change="model"
				left-icon="https://daiyue.gzzhenyi.net/static/image/store/search@4x.png" v-model="searchValue" :value="value"
				placeholder="请输入搜索关键词" />
		</view>
		<view class="nav_tab" v-if="searchValue">
			<view class="tab_item_a" :class="{ act: act == 0 }" @click="switchMain(0)">
				默认推荐
				<!-- <van-icon name="arrow-down" /> -->
			</view>
			<view class="tab_item_a" :class="{ act: act == 1 }" @click="switchMain(1)">
				距离 <van-icon :name="`arrow-${priceArrow_1 ? 'up' : 'down'}`" />
			</view>
			<view class="tab_item_a" :class="{ act: act == 2 }" @click="switchMain(2)">
				销量 <van-icon :name="`arrow-${priceArrow_2 ? 'up' : 'down'}`" />
			</view>
			<view class="tab_item_a" :class="{ act: act == 3 }" @click="switchMain(3)">
				价格 <van-icon :name="`arrow-${priceArrow_3 ? 'up' : 'down'}`" />
			</view>
		</view>
		<view class="swiper-item">
			<view class="item_card" v-for="(item, index) in shopList " :key="index">
				<view class="title_msg">
					<image style="width: 100rpx;height: 100rpx;" :src="baseUrl + item.avatar" mode="aspectFill">
					</image>
					<view class="right">
						<view class="top">
							<view class="top_lf">
								<text>{{ item.shopname }}</text>
								<view v-if="item.state != 2" :class="{ spanX: item.state == 0, spanZ: item.state == 1 }">
									{{ spanList[item.state] }}
								</view>
							</view>
							<view class="top_right" @tap="toDetails(item.id)">
								<text>进入店铺</text>
								<van-icon name="arrow" color="#359BEF" size="14px" />
							</view>
						</view>
						<view class="bottomews">
							<text>近90天成交额
								<text class="orign">{{ $daiyueapp.hotbuyShow(item.score_service) }}</text>
							</text>
							<text>回头率
								<text class="orign">{{ item.level * 100 }}%</text>
							</text>
							<text>综合服务分
								<text class="orign">{{ item.score_service }}</text>
							</text>
						</view>
					</view>
				</view>

				<view class="goodsList" v-if="item.goods && item.goods.length > 0">
					<view class="goods_card" v-if="index2 < 3" v-for="(ites, index2) in item.goods" :key="index2"
						@click="onClick(ites)">
						<image style="width: 214rpx;height:214rpx;border-radius: 12rpx;" :src="baseUrl + ites.image"
							mode="aspectFit"></image>
						<text>{{ ites.title }}</text>
						<view class="price" v-if="ites.vip_price > 0">
							￥{{ ites.vip_price }}
						</view>
						<view class="price">验证后查询底价</view>
					</view>
				</view>

				<view class="foot_msg">
					<text>主营：{{ item.bio }}</text>
					<view class="location_msg">
						<image style="width: 20rpx;height: 24rpx; margin-right: 10rpx; "
							src="https://daiyue.gzzhenyi.net/static/image/store/local4x.png" mode="aspectFit">
						</image>
						<text>{{ item.city }}</text>
					</view>
				</view>
			</view>
			<van-empty description="暫无店铺" v-if="shopList.length == 0" />

		</view>
		<view class="bottom">
			<button class="custom-button" type="default" plain="true" open-type="contact">
				<image src="/static/index/contact.png" mode="widthFix"></image>
			</button>
		</view>
	</view>
</template>

<script>
	import {
		getShopList,
		getGoodsList,
		getSearch
	} from "@/api/api.js"
	import baseUrl from "@/api/baseUrl";
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				baseUrl,
				currIndex: 0,
				swiperHeight: 0, // 滑块的高度(单位px)
				act: 0,
				value: "",
				tab: ["综合推荐", "回头率", "价格"],
				spanList: ["限时抢购", "最近热门", ""],
				shopList: [],
				shop_type: '',
				searchValue: '',
				priceArrow_1: true, // 价格箭头
				priceArrow_2: true, // 价格箭头
				priceArrow_3: true, // 价格箭头
				isPrice_1: false,
				isPrice_2: false,
				isPrice_3: false,
			}
		},
		computed: {
			...mapState(['user']),
		},
		onHide() {
			if (!this.searchValue) {
				this.shop_type = ''
				this.serve()
			}
		},
		onLoad(options) {
			console.log('option', options)
			// setTimeout(this.setSwiperHeight, 10)

			if (options.searchValue) {
				this.searchValue = options.searchValue
			}
			if (!this.searchValue) {
				if (options.shop_type) {
					this.shop_type = options.shop_type
				}
				this.serve()
			} else {
				this.getSearchList()
			}
		},
		methods: {
			// 全局搜索
			getSearchList(params = {}) {
				if (!this.searchValue.trim()) {
					this.serve()
				} else {
					getSearch({
						keyword: this.searchValue,
						sort: 'nomal',
						...params
					}).then(res => {
						if (res.code == 1) {
							this.shopList = res.data
							console.log('shopList', this.shopList)
						}
					})
				}
			},
			model(e) {
				this.searchValue = e.detail
			},
			serve() {
				getShopList({
					shop_type: this.shop_type
				}).then(res => {
					if (res.code == 1) {
						res.data.forEach(async item => {
							let res1 = await getGoodsList({
								shop_id: item.id,
								page: 1,
								limit: 3
							})
							item.goodsList = res1.data.list
						})
						setTimeout(() => {
							this.shopList = res.data
							console.log('shopList', this.shopList)
						}, 500)
					}
				})
			},
			getScript() {
				uni.navigateTo({
					url: '/long/setCity/setCity'
				})
			},
			toDetails(id) {
				uni.navigateTo({
					url: `/pages/storeDetails/sotreDetails/sotreDetails?id=${id}`
					// url:"/pages/storeDetails/sotreDetails/sotreDetails"
				})
			},

			onClick(item) {
				// console.log('item', item)
				uni.navigateTo({
					url: `/long/productDetail/productDetail?main_type=${item.main_type}&id=${item.id}`
				})
			},

			switchMain(num) {
				this.act = num
				let data = {};
				switch (num) {
					case 0:
						// 默认
						data = {
							sort: 'normal',
							order: ''
						}
						this.isPrice_1 = false;
						this.isPrice_2 = false;
						this.isPrice_3 = false;
						break;
					case 1:
						// 距离
						// 修改销量升降排序
						if (this.isPrice_1) {
							this.priceArrow_1 = !this.priceArrow_1;
						}

						if (this.priceArrow_1) {
							data = {
								sort: 'distance',
								order: 'asc'
							}
						} else {
							data = {
								sort: 'distance',
								order: 'desc'
							}
						}

						this.isPrice_1 = true;
						this.isPrice_2 = false;
						this.isPrice_3 = false;
						break;
					case 2:
						// 销量
						// 修改销量升降排序
						if (this.isPrice_2) {
							this.priceArrow_2 = !this.priceArrow_2;
						}

						if (this.priceArrow_2) {
							data = {
								sort: 'sales',
								order: 'asc'
							}
						} else {
							data = {
								sort: 'sales',
								order: 'desc'
							}
						}

						this.isPrice_2 = true;
						this.isPrice_1 = false;
						this.isPrice_3 = false;
						break;
					case 3:
						// 价格
						// 修改价格升降排序
						if (this.isPrice_3) {
							this.priceArrow_3 = !this.priceArrow_3;
						}

						if (this.priceArrow_3) {
							data = {
								sort: 'price',
								order: 'asc'
							}
						} else {
							data = {
								sort: 'price',
								order: 'desc'
							}
						}

						this.isPrice_3 = true;
						this.isPrice_2 = false;
						this.isPrice_1 = false;
						break;
					default:
						break;
				}
				this.getSearchList(data)
			},
			/* 切换 swiper 滑块 */
			changeSwiper(e) {
				this.currIndex = item.detail.current;
				this.act = this.currIndex
				setTimeout(this.setSwiperHeight, 10)
			},

			/* 动态设置 swiper 的高度 */
			setSwiperHeight() {
				const element = "#wrap" + this.currIndex;
				const query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec(res => {
					if (res && res[0]) this.swiperHeight = res[0].height;
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	#wrap {}

	.swiper-item {
		display: flex;
		flex-direction: column;
		align-items: center;

		.item_card {
			width: 670rpx;
			padding: 30rpx 20rpx 22rpx 20rpx;
			border-radius: 16rpx;
			background-color: #fff;
			margin-top: 22rpx;
			box-shadow: 4rpx solid #eee;

			.title_msg {
				display: flex;
				align-items: center;

				.right {
					margin-left: 20rpx;
					width: 570rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.top {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.top_lf {
							display: flex;
							align-items: center;

							text {
								font-family: PingFang SC;
								font-size: 30rpx;
								color: #333333;
							}

							.spanX {
								border-radius: 6rpx 6rpx 100rpx 6rpx;
								opacity: 1;
								font-size: 20rpx;
								color: #FFFFFF;
								background: linear-gradient(103deg, #F69700 -8%, #EB5E00 100%);
								padding: 0rpx 12rpx;
								margin-left: 10rpx;
							}

							.spanZ {
								border-radius: 6rpx 6rpx 100rpx 6rpx;
								opacity: 1;
								font-size: 20rpx;
								color: #FFFFFF;
								background: linear-gradient(107deg, #7388C7 -10%, #3F5096 100%);
								padding: 0rpx 12rpx;
								margin-left: 10rpx;
							}
						}

						.top_right {
							text {
								font-size: 28rpx;
								font-weight: normal;
								line-height: normal;
								color: #359BEF !important;
							}
						}
					}

					.bottomews {
						margin-top: 14rpx;
						font-size: 22rpx;
						font-weight: normal;
						line-height: 22rpx;
						letter-spacing: 0px;

						color: #909090;

						.orign {
							color: #FF7621;
							margin: 0 10rpx;
						}


					}
				}
			}

			.goodsList {
				// display: flex;
				margin-top: 20rpx;
				// justify-content: space-between;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 20rpx;

				.goods_card {
					text {
						font-family: PingFang SC;
						font-size: 26rpx;
						font-weight: normal;
						line-height: 26rpx;
						letter-spacing: 0px;
						color: #333333;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2; //行数
						-webkit-box-orient: vertical;
					}

					.price {
						font-size: 24rpx;
						font-weight: normal;
						line-height: 28rpx;
						// text-align: center;
						letter-spacing: 0px;
						color: #FF6200;
						margin-top: 10rpx;
					}
				}
			}

			.foot_msg {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;
				font-family: PingFang SC;
				font-size: 22rpx;
				font-weight: normal;
				line-height: 22rpx;
				text-align: justify;
				/* 浏览器可能不支持 */
				letter-spacing: 0px;

				color: #909090;

				.location_msg {
					display: flex;
					align-items: center;
				}
			}
		}
	}

	.nav_tab {
		width: 660rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// justify-content: space-evenly;
		padding: 20rpx 40rpx;
		background-color: #fff;

		.tab_item_a {

			font-family: PingFang SC;
			font-size: 26rpx;
			font-weight: normal;
			line-height: 30rpx;
			text-align: center;
			letter-spacing: 0px;
			color: #5C5C5C;
		}

		.act {
			font-size: 28rpx;
			font-weight: normal;
			line-height: 30rpx;
			letter-spacing: 0px;
			color: #333333;
		}
	}

	.nav_title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;

		.nav_left {
			display: flex;
			align-items: center;
			margin-left: 32rpx;

			text {
				font-family: PingFang SC;
				font-size: 26rpx;
				font-weight: normal;
				line-height: 22rpx;
				letter-spacing: 0rpx;
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		right: 2%;

		.custom-button {
			border: none !important;
			padding: 0 !important;
			line-height: normal;

			image {
				width: 117rpx;
				height: 117rpx;
				object-fit: cover;
			}
		}
	}
</style>